<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue3-escook</title>
  <link rel="stylesheet" href="./lib/style.css">
  <style>
    /* 普通样式：正常粗细 */
    .normal {
      font-weight: normal;
    }

    /* 激活时的样式：加粗、橘黄色、倾斜 */
    .active {
      font-weight: bold;
      color: orange;
      font-style: italic;
    }

    /* 文本装饰 */
    .decoration {
      text-decoration: underline solid purple 0.6em;
      text-underline-offset: -0.4em;
      text-decoration-skip-ink: none;
    }
  </style>
  <script type="importmap">
    {
      "imports" : {
        "vue": "./lib/vue-3.4.29.js"
      }
    }
  </script>
  <script type="module">
    import { createApp, ref, computed } from 'vue'

    const app = createApp({
      setup() {
        const isActive = ref(false)
        const isDecorate = ref(false)

        // 计算属性：控制元素的类名
        const classObj = computed(() => ({ active: isActive.value, decoration: isDecorate.value }))

        return {
          isActive,
          isDecorate,
          classObj
        }
      }
    })

    app.mount('#app')
  </script>
</head>

<body>
  <div id="app">
    <button @click="isActive = !isActive">toggle active</button>
    <button @click="isDecorate = !isDecorate">toggle decoration</button>
    <!-- 可以通过静态的属性，为元素应用 class 类名 -->
    <!-- <h1 class="normal" :class="isActive ? 'active' : ''">liulongbin</h1> -->
    <!-- <h1 class="normal" :class="[isActive ? 'active' : '', isDecorate ? 'decoration' : '']">liulongbin</h1> -->
    <!-- <h1 class="normal" :class="{active: isActive, decoration: isDecorate}">liulongbin</h1> -->
    <h1 class="normal" :class="classObj">liulongbin</h1>
  </div>
</body>

</html>